<template>
  <div
    v-if="!isChildComponent"
    class="ext-style-setting"
  >
    <div
      class="rooter"
      @click="openDialog"
    >
      <el-button
        type="primary"
        size="default"
        style="margin: 15px"
      >
        <span
          class="rooter_btn_inner"
          :title="$demoi18n('word.extendedStyleSettings')"
        >{{ $demoi18n('word.extendedStyleSettings') }}</span>
      </el-button>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="$demoi18n('word.extendedStyleSettings')"
      width="1100px"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :class="`${visualThemeClassName} ext-style-setting-dialog ${xvueNameSpace}`"
      @close="canelDialog()"
    >
      <template #header>{{ $demoi18n('word.extendedStyleSettings') }}</template>
      <ExtStyleSettingMain
        ref="mainBox"
        :config="config"
        :widgetInstanceId="widgetInstanceId"
        :ext-styles="extStyles"
        :extStyleOptions="extStyleOptions_"
      />
      <template #footer>
        <span>
          <el-button
            size="default"
            @click="canelDialog()"
          >{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button
            type="primary"
            size="default"
            @click="saveDialog()"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ExtStyleSettingMain from '@/components/common/ext-style/ext-style-setting-main.vue';
import { validChildForms, camelCase, addArrRandKey, delArrRandKey } from '@/utils/util.js';
import extStyleOptions from './ext-style-options.js';

export default {

  // 添加组件name属性
  components: { ExtStyleSettingMain },
  provide() {
    return {
      addChild: formVm => {
        this.validateForms.push(formVm);
      },
    };
  },
  inject: {
    isChildComponent: {
      default: false,
    },
  },
  props: {
    widgetInstanceId: String,
    config: Object,
    extStyleOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      dialogVisible: false,
      extStyles: [],
      validateForms: [],
    };
  },
  computed: {
    extStyleOptions_() {
      if (this.extStyleOptions?.length) {
        return this.extStyleOptions;
      }

      const compName = this.config.propertyPannelName.replace(`config_${process.env.xvueNameSpace_}`, '');
      const options = extStyleOptions[compName] || [];
      return options;
    },
  },
  methods: {
    openDialog() {
      this.initExtStyles();
      this.dialogVisible = true;
    },
    initExtStyles() {
      const extStyles = JSON.parse(JSON.stringify(this.config.config.property.extStyles || []));

      extStyles.forEach(n => {
        n.styles.forEach(n1 => {
          n1.type = camelCase(n1.type); // 转驼峰 font-size => fontSize
        });
      });

      addArrRandKey(extStyles);
      this.extStyles = extStyles;
    },
    canelDialog() {
      this.dialogVisible = false;
    },
    async saveDialog() {
      const errors = await validChildForms(this.validateForms);
      if (errors.length) {
        return;
      }
      if (!this.checkExtStyles()) {
        return;
      }

      delArrRandKey(this.extStyles);
      this.config.config.property.extStyles = JSON.parse(JSON.stringify(this.extStyles));
      this.$emit('save', this.extStyles);
      this.dialogVisible = false;
    },
    checkExtStyles() {
      const extStyleOptionsArr = [];
      for (let i = 0; i < this.extStyles.length; i++) {
        const extStyle = this.extStyles[i];
        const extStyleArr = [];
        const { styles } = extStyle;
        for (let j = 0; j < styles.length; j++) {
          const style = styles[j];
          if (extStyleArr.includes(style.type)) {
            this.$message({
              message: this.$demoi18n('panel.extStyleSetting.subItemError'),
              type: 'error',
            });
            return false;
          }
          extStyleArr.push(style.type);
        }
      }
      return true;
    },
  },
};
</script>

<style lang="less" scoped>
.ext-style-setting {
  display: inline-flex;
  .rooter {
    .rooter_btn_inner{
      display: block;
      max-width: 120px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

</style>
